<template>
	<view>
		<view class="all_comment u-border-bottom">
			<view class="all_comment_top">
				<view class="title">
					全部评论({{commentCount}})
				</view>
				<view class="rate_title">
					好评率{{favorableRate}}%
				</view>

			</view>
			<view class="all_comment_bottom">
				<view @click="handType(index)" class="bottom_btn " :class="active==index&&'bottom_active'"
					v-for="(item,index) in typeList" :key='item.lable'>
					{{item.lable}}
				</view>

			</view>
		</view>
		<view class="evaluate_list">
			<u-empty v-if="list.length==0"></u-empty>
			<Evaluate v-else v-for="item in list" :key='item.id' :item='item'>
			</Evaluate>
		</view>
	</view>
</template>

<script>
	import Evaluate from '@/components/ZY-evaluate/ZY-evaluate.vue'
	import initData from '@/mixin/initData.js'
	export default {
		mixins: [initData],
		components: {
			Evaluate
		},
		computed: {

		},
		data() {
			return {
				active: 0,
				typeList: [{
					lable: '全部评论',
					id: 1
				}, {
					lable: '最新评论',
					id: 2
				}, {
					lable: '好评',
					id: 3
				}, {
					lable: '差评',
					id: 4
				}],
				// 类型 1全部 2最新 3好评 4差评
				type: 1,
				id: ''
			};
		},
		onLoad(e) {
			if (e && e.id) {
				this.id = e.id
			}
			this.miXinInit()
		},
		methods: {
			handType(i) {
				this.active = i
				this.type = this.typeList[i].id
				this.toReset()
				this.miXinInit()
			},
			// 请求前的参数处理
			beforeInit() {
				this.apiUrl = "goodsComment/getGoodsCommentById";
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					type: this.type,
					id: this.id
				};

				this.params = {
					...params
				};
			},
		}
		// GET /app/goodsComment/getGoodsCommentById
	}
</script>

<style lang="scss" scoped>
	.all_comment {
		padding: 20rpx;
		padding-bottom: 44rpx;

		.all_comment_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			font-size: 28rpx;
			color: #000000;
			margin-bottom: 36rpx;
		}

		.all_comment_bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.bottom_btn {
				width: 140rpx;
				height: 44rpx;
				line-height: 44rpx;
				color: #6A6A6A;
				font-size: 26;
				border-radius: 10px 10px 10px 10px;
				background-color: rgba(223, 223, 223, 100);
				text-align: center;

			}

			.bottom_active {
				background-color: #FF365D;
				color: #fff;
			}
		}
	}
</style>
